<template>
  <div>
    <el-dialog
      :title="eject.isadd == true ? '角色添加' : '角色编辑'"
      :visible.sync="eject.isshow"
      @closed="guanbi"
    >
      <el-form :model="form">
        <el-form-item label="角色名称" label-width="120px" :rules="rules">
          <el-input
            v-model="form.rolename"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>

        <!-- 树结构 -->
        <el-tree
          :data="tree"
          show-checkbox
          node-key="id"
          ref="tree"
          highlight-current
          :props="{ children: 'children', label: 'title' }"
        >
        </el-tree>

        <el-form-item label="状态" label-width="120px">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inaactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add()" v-if="eject.isadd"
          >添 加</el-button
        >
        <el-button type="primary" @click="update" v-else>编 辑</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqmenuadd,
  reqroleone,
  reqmenuedit,
  reqroleadd,
  reqroleedit
} from "../../../request/api";
import { successAlert,errorAlert } from "../../../utils/alert";
export default {
  props: ["eject", "list", "tree"],
  data() {
    return {
      form: {
        rolename: "",
        menus: "",
        status: '',
      },

      rules: [
        {
          required: true,
        },
      ],

      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 关闭弹框清楚样式清空表单
    guanbi() {
      !this.eject.isadd && this.empty();
    },
    // 点击取消告诉父组件关闭
    close() {
      this.$emit("close");
    },
    // 封装一个清空方法
    empty() {
      this.form = {
        rolename: "",
        menus: '',
        status: 1,

      };
    },

    //点击添加按钮
    add() {
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      // console.log(this.form);
      reqroleadd(this.form).then((res) => {
        // 添加成功之后
        if (res.data.code == 200) {

          // 弹出弹框
          successAlert(res.data.msg);
          // 清空输入框
          this.empty();
          // 弹框消失
          this.eject.isshow = false;
          // 重新列表请求
          this.$emit("init");
        }

   
        console.log(res);
      });

     
    },

    update() {
        // 1.将tree上的数据赋值给form.menus 
      this.form.menus=JSON.stringify(this.$refs.tree.getCheckedKeys())
      // 请求接口
      reqroleedit(this.form).then((res) => {
        console.log(res);
        
        if (res.data.code == 200) {
          // 弹出成功提示框
          successAlert(res.data.msg);
          // 清空输入框
          this.empty();
          // 关闭弹窗
          this.eject.isshow = false;
          // 通知父组件更新列表
          this.$emit("update");
          return
        }
        if(res.data != 200){
          errorAlert(res.data.msg)
        }

      });
    },

    changepid() {
      this.form.type = this.form.pid == 0 ? 1 : 2;
    },

    // 获取一条信息方法，父组件通过ref调用
    getone(id) {
      reqroleone({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.form = res.data.list;
          //********************************* */
          this.form.id = id;
          this.$refs.tree.setCheckedKeys(JSON.parse(this.form.menus));
        }
      });
      console.log(123);
    },
  },
};
</script>

<style scoped >
</style>
